<template>
    <el-row>
        <el-col :span="12">
            <el-card shadow="hover">
                <h4>内存占用</h4>
                <div ref="memoryChartRef" class="memoryChart"></div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card  shadow="hover">
                <h4>CPU使用率</h4>
                <div ref="cpuChartRef" class="cpuChart"></div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { onMounted , ref, reactive } from 'vue';
import * as echarts from 'echarts';
import { defineProps, watch } from 'vue';

const props = defineProps(["data"])
const memCpuList = reactive({...props.data})

const memoryChartRef = ref()
const cpuChartRef = ref()
let memoryChart = null
let cpuChart = null

let memoryUsage = ref(0)
let cpuUsage = ref([])

watch(() => props.data, (data) => {
  memCpuList.mem = data.mem 
  memCpuList.cpu = data.cpu

  memoryUsage.value = parseFloat(memCpuList.mem)
  cpuUsage.value = [...memCpuList.cpu]
  
  initCharts()

  // console.log(memoryUsage.value, cpuUsage.value)
}, { deep: true })

const initCharts = () => {
  if (memoryChart === null) {
    memoryChart = echarts.init(memoryChartRef.value);
  }
  if (cpuChart === null) {
    cpuChart = echarts.init(cpuChartRef.value);
  }

  memoryChart.setOption({
    series: [{
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      center: ['50%', '75%'],
      radius: '115%',
      min: 0,
      max: 1,
      splitNumber: 8,
      axisLine: {
        lineStyle: {
          width: 6,
          color: [
            [0.25, '#7CFFB2'],
            [0.5, '#58D9F9'],
            [0.75, '#FDDD60'],
            [1, '#FF6E76']
          ]
        }
      },
      pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        length: '12%',
        width: 20,
        offsetCenter: [0, '-60%'],
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        length: 12,
        lineStyle: {
          color: 'auto',
          width: 2
        }
      },
      splitLine: {
        length: 20,
        lineStyle: {
          color: 'auto',
          width: 5
        }
      },
      axisLabel: {
        color: '#464646',
        fontSize: 20,
        distance: -60,
        rotate: 'tangential',
        formatter: function (value) {
          if (value === 0) {
            return "0"
          } else if (value === 0.25) {
            return "0.25"
          }
          else if (value === 0.5) {
            return "0.5"
          } else if (value === 0.75) {
            return "0.75"
          }
          else if (value === 1) {
            return "1"
          }
          return '';
        }
      },
      title: {
        offsetCenter: [0, '-10%'],
        fontSize: 20
      },
      detail: {
        fontSize: 30,
        offsetCenter: [0, '-35%'],
        valueAnimation: true,
        formatter: function (value) {
          return Math.round(value * 100) + '';
        },
        color: 'inherit',
      },
      data: [
        {
          value: memoryUsage.value,
          name: "Memory(%)",
        }
      ]
    }]
});


cpuChart.setOption({
    animation: true, //控制动画示否开启
    animationDuration: 3000,
    animationEasing: 'bounceOut', //缓动动画
    animationThreshold: 8, //动画元素的阈值
    title: {
        textStyle: {
            fontSize: 13,
        },
        left: '50%',
        textAlign: 'center',
    },
    tooltip: {
        trigger: 'axis',
    } as any,
    grid: {
        bottom: '20%',
        top: '10%',
        left: '5%',
        right: '3%',
    },
    xAxis: {
        type: 'category',
        axisLabel: {
            show: true,
        },
        axisTick: {
            show: true,
        },
        data: cpuUsage.value.map(item => item.time),
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            show: true,
            formatter: '{value}'
        },
        axisTick: {
            show: true,
        },
    },
    series: [
          {
            name: 'CPU',
            type: 'line',
            smooth: true,
            showSymbol: false,
            data: cpuUsage.value.map(item => item.usage),
          },
        ],
  });
};

onMounted(() => {
  initCharts()
});


</script>


<style lang="scss" scoped>
.el-card {
  margin-left: 30px;
}
.memoryChart {
    height: 250px;
}
.cpuChart {
    height: 250px;
}

</style>